<template>
  <div class="main">
    <div class="mainContainer">
      <transition
        leave-active-class="opacityOut"
        enter-active-class="opacityIn"
        mode="out-in"
        appear
      >
        <keep-alive>
          <!--使用keep-alive会将页面缓存-->
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
      </transition>
      <transition
        leave-active-class="opacityOut"
        enter-active-class="opacityIn"
        mode="out-in"
        appear
      >
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </transition>
      <tabBar />
      <!-- <div class="window" v-if="window" >
      <div class="window-box" @click="download">
        <div class="imgs">
          <img src="../../assets/imgs/logo.png" alt="" />
        </div>
        <div class="box">
          <div class="text">Download the app to earn more income</div>
          <div class="anniu" @click.stop="download">Download</div>
        </div>
        <div class="x" @click.stop="consol">x</div>
      </div>
    </div> -->
    </div>
  </div>
</template>

<script>
import tabBar from "@/components/tabBar/index";
export default {
  data() {
    return {
      window: true,
      path: "",
    };
  },
  created() {
    // if (this.$store.state.market.versions == "") {
    //   this.$store
    //     .dispatch("getVersions", {
    //       type: "android",
    //     })
    //     .then((res) => {
    //       this.path = res.data.path;
    //     });
    // } else {
    //   this.path = this.$store.state.market.versions.data.path;
    // }
  },
  components: {
    tabBar,
  },
  methods: {
    download() {
      window.location.href = this.path;
    },
    consol() {
      this.window = false;
    },
  },
};
</script>

<style lang="scss">
.opacityIn {
  animation: bounce-in 0.3s;
}
.opacityOut {
  animation: bounce-in 0.3s reverse;
}
@keyframes bounce-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.main,
.mainContainer {
  height: 100%;
}
.window {
  width: 375px;
  position: fixed;
  bottom: 75px;
  z-index: 999;
  .window-box {
    margin: auto;
    width: 306px;
    height: 76.65px;
    // background: url("../../assets/imgs/window.png");
    background-size: 100% 100%;
    display: flex;
    position: relative;
    .imgs {
      width: 39.5px;
      height: 39.5px;
      margin: 10px;
      img {
        border-radius: 4px;
      }
    }
    .box {
      .text {
        font-size: 13px;
        color: #fff;
        line-height: 30px;
      }
      .anniu {
        width: 67px;
        height: 18px;
        position: absolute;
        left: 50%;
        right: 50%;
        transform: translate(-50%, -50%);
        top: 45%;
        bottom: 30px;
        background: #e87474;
        border-radius: 9px;
        color: #fff;
        text-align: center;
        line-height: 18px;
        font-size: 12px;
      }
    }
    .x {
      position: absolute;
      width: 25px;
      height: 25px;
      line-height: 20px;
      text-align: center;
      bottom: 5px;
      left: 140px;
      font-size: 20px;
      color: #fff;
    }
  }
}
</style>